Introduction

Hello, I'm Hemanth from the Alliance Department. In this blog, I will demonstrate how to serve a static website on AWS using a private S3 bucket and CloudFront Origin Access Control (OAC). This approach ensures your content is delivered securely and efficiently.

AWS

Amazon Web Services, or AWS, is a cloud service platform that provides content distribution, database storage, processing capacity, and other features to support corporate expansion. AWS has offered a broad range of services in many different categories, including Compute, Storage, Networking, Database, Management Tools, and Security.

S3

Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.

CloudFront

Low latency and fast transfer speeds, Amazon CloudFront is a quick content delivery network (CDN) solution that securely sends data, videos, apps, and APIs to clients all over the world. In addition to providing cutting-edge security capabilities like DDoS defense and field-level encryption, CloudFront interfaces with AWS services.

Demo

Click on Create bucket.

Provide a bucket name and keep other settings as default.

Click on Create bucket.

Bucket successfully created.

Go into the bucket and click on Properties.

Scroll down and click on Edit in the Static website hosting section.

Enable static website hosting, select the hosting type as Static website hosting, and provide your index document name.

Keep other settings as default, scroll down, and click on Save changes.

Successfully edited the static website hosting configuration.

Upload your objects, especially the index.html file, into the S3 bucket.


Search for CloudFront in the AWS Management Console and click on it.

In the security section, click on Origin access.

Click on Create control setting, provide a name, and create the OAC. This OAC will be used to connect CloudFront with the S3 bucket.


Now create the CloudFront distribution by clicking on Create distribution.

In the origin domain, select the previously created S3 bucket, and in the origin access settings, select the previously created OAC.

Disable WAF (Web Application Firewall) as it is not needed currently.

Keep other settings as default and click on Create distribution.

Successfully created the distribution.

Go back to the S3 bucket and click on the Permissions tab.

Click on Edit in the Bucket policy section.

Copy and paste the following bucket policy, making the necessary changes (e.g., bucket name, AWS account number, CloudFront distribution ID). Then click on Save changes.


In CloudFront, go to your distribution and under General settings, click on Edit.

In the default root object, enter index.html and click on Save changes.

Copy the CloudFront distribution domain name and paste it into a new browser tab. Your static website should be successfully deployed and accessible.

Conclusion

S3 and CloudFront with Origin Access Control are two AWS technologies that you may use to host static websites securely and with improved scalability and speed. With this configuration, you can be guaranteed that your material can only be accessed via CloudFront, which increases security and speeds up delivery to users across the globe. This method offers a strong option for hosting static webpages by combining the scalability of S3, the security of OAC, and the performance of CloudFront.